<template>
  <label for="uploadFile" @click="clickFile">
    <el-tooltip class="item" effect="dark" :content="$t('common.base.attachment')" placement="top">
      <i
        class="iconfont icon-fdn-attachment attachment"
        :style="{
          color: disabled ? '#bfbfbf' : '',
          cursor: disabled ? 'not-allowed' : 'pointer',
        }"
      ></i>
    </el-tooltip>
    <input
      type="file"
      class="hide"
      ref="imgDom"
      @change="fileChange"
      multiple
    />
  </label>
</template>

<script>
/** vue */
import FileMixin from '@src/modules/system/frame/component/InternalCoordination/chat/FileMixin.js'
export default {
  name: 'upload-file',
  mixins: [FileMixin],
  props:{
    disabled:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
    };
  },
  methods: {
    clickFile() {
      let img = this.$refs.imgDom;
      img && img.click();
    },
    fileChange(event) {
      this.handleFileChange(event, 'file');
      this.$refs.imgDom.value = null;
    },
  },
};
</script>
<style scoped>
.attachment {
  color: #8c8c8c;
  cursor: pointer;
}
.attachment:hover {
  color: $color-primary-light-6;
}
.hide {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  filter: alpha(opacity=0);
  opacity: 0;
  cursor: inherit;
  display: none;
}
.el-icon-paperclip {
  font-size: 14px;
  margin: 10px 0;
}
</style>
